<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #03A9CE;
        }
        div {
            margin: 100px auto;
            width: 200px;
            height: 100px;
            /* border: 1px dashed #fff; */
            outline: 3px solid #fff;
            outline-offset: -3px;
            background: linear-gradient(90deg, #fff 50%, transparent 0) repeat-x,
                linear-gradient(90deg, #fff 50%, transparent 0) repeat-x,
                linear-gradient(0deg, #fff 50%, transparent 0) repeat-y,
                linear-gradient(0deg, #fff 50%, transparent 0) repeat-y;
            background-size: 4px 3px, 4px 3px, 3px 4px, 3px 4px;
            background-position: 0 0, 0 100%, 0 0, 100% 0;
        }

        div:hover {
            animation: linearGradientMove .3s infinite linear;
            outline:none;
        }

        @keyframes linearGradientMove {
            100% {
                background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
            }

        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>